<template>
	<view>
		<NavBar title="Perfect体验"></NavBar>
		
		<img class="banner" :src="bannerUrl" :style="{ marginTop: navBarHeight+'px'}" @click="handleBannerClick"/>
		
		<view class="treatmentCategoryWrap">
			<view class="header">
				<view class="line">
					<view class="text">各项疗程</view>
				</view>
			</view>
			<view class="treatmentCategories">
				<view v-for="treatmentCategory in treatmentCategories">
					<view class="treatmentCategory" :key="treatmentCategory.id">
						<img :src="treatmentCategory.image_url" class="img"/>
						<text class="txt">{{treatmentCategory.name}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="allTreatmentsAndCategories">
			<view v-for="(item, key) in allTreatmentsAndCategories" :key="key">
				<view class="header">
					<view class="line">
						<view class="text">{{key}}</view>
					</view>
				</view>
				
				<view class="more" @click="handleMore(key)">
					<text class="txt">更多</text>
					<img class="img" src="/static/index/rTriangle.png"/>
				</view>
				
				<view class="treatments">
					<view v-for="i in item" :key="i.id">
						<Goods :price="i.new_price" :image="i.thumb_url" :name="i.name" :mins="i.mins"></Goods>
					</view>
				</view>
				
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue';
	import tabBar from "@/custom-tab-bar/index.vue";
	import Goods from '@/components/Goods.vue';

	import {getGlobalData,Request,navBarHeight}  from '@/util.js';
	const domain = getGlobalData('domain');
	
	export default {
		components:{
			NavBar,
			tabBar,
			Goods
		},
		onShow(){
			this.commitTabBarID(1);
		},
		data() {
			return {
				bannerUrl:"",
				navBarHeight: navBarHeight,
				treatmentCategories:"",
				allTreatmentsAndCategories:[]
			}
		},
		onLoad() {
			this.getBanner();
			this.getTreatmentCategories();
			this.getAllTreatmentsAndCategories();
			
		},
		methods: {
			//处理更多按钮
			handleMore(category){
				console.log(category);
				uni.setStorage({
					key:'selectedCategory',
					data: category,
					success() {
						uni.switchTab({
							url:'/pages/list/index'
						})
					}
				})
				
			},
			//处理banner的点击
			handleBannerClick(){
				uni.navigateTo({
					url: '/pages/gift/index'
				})
			},
			//获取Banner图
			getBanner(){
				Request(domain+"/client/image/getBanner").then((res)=>{
					this.bannerUrl = res.data.data.url_1
				});
			},
			//获取所有的疗程分类信息
			getTreatmentCategories(){
			    Request(domain+"/client/treatmentCategory/allTreatmentCategories").then((res)=>{
			       this.treatmentCategories = res.data.data
			    });
			},
			//获取所有的疗程分类下的所有疗程
			getAllTreatmentsAndCategories(){
				Request(domain+"/client/treatment/treatmentListForHome").then((res)=>{
					this.allTreatmentsAndCategories = res.data.data;
				});
			}
			
		},
	}
</script>
<style lang="less">
	@import '../../uni.less';
	page{
		background-color: @background_color;
		padding-bottom: @tab_bar_height;
	}
</style>
<style scoped lang="less">
	@import '../../uni.less';
	.banner{
		width: 100%;
		height: 880rpx;
	}
	
	.treatmentCategoryWrap{
		margin-top: 35rpx;
		width: 100%;
		height: 320rpx;
	    .header{
	        width:66%;
	        height:40rpx;
	        margin:0 auto;
	        margin-top: 50rpx;
	        .line{
	            width: 100%;
	            height: 3rpx;
	            margin-top: 10rpx;
	            background-color: #fffffe;
	            .text{    
	                background-color: #f7f1f0;
	                /* border:1px solid #000; */
	                width: 170rpx;
	                text-align: center;
	                margin: 0 auto;
	                color: #D1A8A8;
	                position: relative;
	                font-size: 34rpx;
	                top: -20rpx;
	                font-weight: 450;
	                letter-spacing:3rpx;
	            }
	        }
	    }
		
		.treatmentCategories{
	        width: 90%;
	        margin: 0 auto;
	        display: flex;
	        flex-direction: row;
	        align-items: center;
	        justify-content: space-between;
	        height: 200rpx;
			.treatmentCategory{
				display: flex;
				justify-content: center;
				flex-direction: column;
				.img{
					width: 160rpx;
					height: 160rpx;
				}
				.txt{
					text-align: center;
					font-size: 22rpx;
					color: #8c7776;
				}
			}			
		}
	}
	
	.allTreatmentsAndCategories{
		margin-top: 25rpx;
		width: 100%;
		.header{
			width:66%;
			height:40rpx;
			margin:0 auto;
			margin-top: 10rpx;
			.line{
				width: 100%;
				height: 3rpx;
				margin-top: 10rpx;
				background-color: #fffffe;
				.text{
					background-color: #f7f1f0;
					width: 170rpx;
					text-align: center;
					margin: 0 auto;
					color: #D1A8A8;
					position: relative;
					font-size: 34rpx;
					top: -20rpx;
					font-weight: 450;
					letter-spacing:3rpx;
				}
			}
		}
		
	    .more{
	        width: 105rpx;
	        height: 40rpx;
	        color:white;
	        background-color: #D1A8A8;
	        border-radius: 10rpx;
	        margin-left: 610rpx;
	        margin-top: 10rpx;
	        margin-bottom: 20rpx;
	        text-align: center;
	        display: flex;
	        flex-direction: row;
	        justify-content: center;
	        align-items: center;
	        letter-spacing:3rpx;
	        font-size: 24rpx;
	        font-weight: 500;
	
	        .txt{
	            margin-left:10rpx;
	        }
	
	        .img{
	            width: 30rpx;
	            height: 30rpx;
	        }
	    }	
	
		.treatments{
			width: 95%;
			margin: 40px auto;
			margin-bottom: 80px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap;
		}
	}
</style>
